  <template>
    <div>
        <!-- 第一行 -->
        <div class="row">
            <div class="col-sm-6 col-xl-3">
                <b-card no-body class="mb-4">
                    <b-card-header class="with-elements pr-0 pb-0 mb-2">
                        <h4 class="media align-items-center font-weight-bold py-3 mb-2">
                            <img src="/static/img/avatars/1.png" alt="" class="ui-w-50 rounded-circle">
                            <div class="media-body ml-3">
                                张三
                                <div class="text-muted text-tiny mt-1">
                                    <small class="font-weight-normal">登录角色：风控专员</small>
                                </div>
                            </div>
                        </h4>
                    </b-card-header>

                    <b-card-header class="with-elements">
                        <div class="card-header-title">
                            <strong>保理借贷融资</strong>
                        </div>
                        <div class="card-header-elements ml-auto">
                            <Button type="info" size="small" shape="circle">
                                <Icon type="arrow-swap" class="mr-2"></Icon>切换
                            </Button>
                        </div>

                        <div class="text-center my-3 px-5">
                            <div class="d-flex align-items-center">
                                <div class="lnr lnr-smile display-4 text-success"></div>
                                <div class="ml-3 mt-2 mb-2">
                                    <div class="text-large">良好</div>
                                    <div class="text-muted small">风控概况</div>
                                </div>
                            </div>
                        </div>
                    </b-card-header>
                </b-card>
            </div>

            <div class="col-sm-6 col-xl-3">
                <b-card no-body class="mb-4">
                    <div class="d-flex align-items-center position-relative mt-4" style="height:110px;">
                        <dashboard2-chart3 class="w-100 position-absolute" :height="110" :width="290" style="top:0;" />
                        <div class="w-100 text-center text-large">54%</div>
                    </div>
                    <div class="text-center my-3" style="margin:4px !important;">
                        <strong>投资占比</strong>
                        <div class="text-muted small">最后更新时间:2天前</div>
                    </div>
                    <b-card-footer class="text-center py-3">
                        <div class="row">
                            <div class="col">
                                <div class="text-muted small">总金额</div>
                                <strong class="text-big">10亿</strong>
                            </div>
                            <div class="col">
                                <div class="text-muted small">当前投资金额</div>
                                <strong class="text-big">8,500万</strong>
                            </div>
                        </div>
                    </b-card-footer>
                </b-card>
            </div>
            <div class="col-sm-6 col-xl-3">
                <b-card no-body class="mb-4">
                    <div class="d-flex align-items-center position-relative mt-4" style="height:110px;">
                        <dashboard4-chart3 class="w-100 position-absolute" :height="110" :width="290" style="top:0;" />
                        <div class="w-100 text-center text-large">63%</div>
                    </div>
                    <div class="text-center my-3">
                        <strong>客户监控比例</strong>
                    </div>
                    <b-card-footer class="text-center py-3">
                        <div class="row">
                            <div class="col">
                                <div class="text-muted small">企业客户总数</div>
                                <strong class="text-big">2,362个</strong>
                            </div>
                            <div class="col">
                                <div class="text-muted small">关注客户</div>
                                <strong class="text-big">1,417个</strong>
                            </div>
                        </div>
                    </b-card-footer>
                </b-card>
            </div>

            <div class="col-sm-6 col-xl-3">
                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6" class="with-elements pr-0 pb-0 mb-2">
                        <div class="card-header-title">
                            <strong>头部客户Top 4</strong>
                        </div>
                        <div class="card-header-elements ml-auto mr-2">
                            <Button type="text" size="small" shape="circle">
                                <!-- <Icon type="more"></Icon> -->
                                <Icon type="android-exit" title="查看更多"></Icon>
                            </Button>
                        </div>
                    </b-card-header>
                    <div class="table-responsive">
                        <table class="table card-table m-0">
                            <tbody>
                                <tr>
                                    <td class=" px-2 border-top-0 text-nowrap align-middle">
                                        <a href="http://www.google.com" class="text-secondary">恒大地产</a>
                                    </td>
                                    <td class=" px-2 w-100 border-top-0 align-middle">
                                        <div class="progress" style="height: 4px;">
                                            <div class="progress-bar" style="width: 29.77%;"></div>
                                        </div>
                                    </td>
                                    <td class=" px-2 border-top-0 text-nowrap align-middle">
                                        11,963&nbsp;
                                        <span class="text-muted small">29.77%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class=" px-2 text-nowrap align-middle">
                                        <a href="http://www.google.de" class="text-secondary">龙光地产</a>
                                    </td>
                                    <td class=" px-2 align-middle">
                                        <div class="progress" style="height: 4px;">
                                            <div class="progress-bar bg-success" style="width: 28.39%;"></div>
                                        </div>
                                    </td>
                                    <td class=" px-2 text-nowrap align-middle">
                                        11,963&nbsp;
                                        <span class="text-muted small">28.39%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class=" px-2 text-nowrap align-middle">
                                        <a href="http://www.twitter.com" class="text-secondary">锤子科技</a>
                                    </td>
                                    <td class=" px-2 align-middle">
                                        <div class="progress" style="height: 4px;">
                                            <div class="progress-bar bg-info" style="width: 23.65%;"></div>
                                        </div>
                                    </td>
                                    <td class=" px-2 text-nowrap align-middle">
                                        9,965&nbsp;
                                        <span class="text-muted small">23.65%</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class=" px-2 text-nowrap align-middle">
                                        <a href="http://www.facebook.com" class="text-secondary">小米手环</a>
                                    </td>
                                    <td class=" px-2 align-middle">
                                        <div class="progress" style="height: 4px;">
                                            <div class="progress-bar bg-warning" style="width: 10.02%;"></div>
                                        </div>
                                    </td>
                                    <td class=" px-2 text-nowrap align-middle">
                                        4,223&nbsp;
                                        <span class="text-muted small">10.02%</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <b-card-footer>
                        <div class="text-muted small text-right">最后更新于2天前</div>
                    </b-card-footer>
                </b-card>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8 col-lg-12 col-xl-6">

                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6">
                        <strong>风控节点</strong>
                    </b-card-header>
                    <!-- <div class="card-header-elements ml-auto mr-2">
                        <Button type="text" size="small" shape="circle"><Icon type="more"></Icon></Button>
                    </div> -->
                    <div class="card-body">
                        <Collapse v-model="controlNode">
                            <Panel name="1">
                                <span class="ml-2">入驻</span>
                                <div style="float:right" class="mr-3">
                                    <Badge count="3"></Badge>
                                </div>
                                <div slot="content" class="text-secondary">
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>

                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-secondary float-right">已读</div>
                                        <a href="javascript:void(0)">2018-08-18腾讯执行打分卡A001得230分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 text-center">
                                        <Button type="ghost" size="small" color="primary">查看更多</Button>
                                    </div>
                                </div>
                            </Panel>
                            <Panel name="2">
                                <span class="ml-2">贷前</span>
                                <div slot="content" class="text-secondary">
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-secondary float-right">已读</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-secondary float-right">已读</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-secondary float-right">已读</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>

                                    <div class="pb-1 text-center">
                                        <Button type="ghost" size="small" color="primary">查看更多</Button>
                                    </div>
                                </div>
                            </Panel>
                            <Panel name="3">
                                <span class="ml-2">贷后</span>
                                <div style="float:right" class="mr-3">
                                    <Badge count="5"></Badge>
                                </div>
                                <div slot="content" class="text-secondary">
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>

                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>
                                    <div class="pb-1 mb-3">
                                        <div class="badge badge-outline-success float-right">打分卡评测</div>
                                        <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                                        <span class="text-muted">#34563</span>
                                        <br>
                                        <small class="text-muted">来源
                                            <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                                    </div>

                                    <div class="pb-1 text-center">
                                        <Button type="ghost" size="small" color="primary">查看更多</Button>
                                    </div>
                                </div>
                            </Panel>
                        </Collapse>
                    </div>
                </b-card>
            </div>

            <div class="col-md-12 col-lg-12 col-xl-6">

                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6">
                        <strong>实时预警/风控信息</strong>
                    </b-card-header>

                    <b-card-body>
                        <div class="pb-1 mb-3">
                            <div class="badge badge-outline-success float-right">打分卡评测</div>
                            <a href="javascript:void(0)">2018-08-20恒大执行打分卡A001得235分.</a>&nbsp;
                            <span class="text-muted">#34563</span>
                            <br>
                            <small class="text-muted">来源
                                <a href="javascript:void(0)" class="text-dark">手动执行</a> &nbsp;·&nbsp; 58个月前</small>
                        </div>

                        <div class="pb-1 mb-3">
                            <div class="badge badge-outline-danger float-right">预警监控</div>
                            <a href="javascript:void(0)">2018-08-20恒大命中预警规则法人变更.</a>&nbsp;
                            <span class="text-muted">#34524</span>
                            <br>
                            <small class="text-muted">来源
                                <a href="javascript:void(0)" class="text-dark">平台监控</a> &nbsp;·&nbsp; 1小时前</small>
                        </div>

                        <div class="pb-1 mb-3">
                            <div class="badge badge-outline-success float-right">打分卡评测</div>
                            <a href="javascript:void(0)">2018-08-19腾讯执行打分卡A001得235分.</a>&nbsp;
                            <span class="text-muted">#34563</span>
                            <br>
                            <small class="text-muted">来源
                                <a href="javascript:void(0)" class="text-dark">业务平台API调用</a> &nbsp;·&nbsp; 1天前</small>
                        </div>

                        <div class="pb-1">
                            <div class="badge badge-outline-secondary float-right">已读</div>
                            <a href="javascript:void(0)">2018-08-19腾讯命中股价异常</a>&nbsp;
                            <span class="text-muted">#34563</span>
                            <br>
                            <small class="text-muted">来源
                                <a href="javascript:void(0)" class="text-dark"> 人工尽调录入</a> &nbsp;·&nbsp; 1天前</small>
                        </div>
                    </b-card-body>
                    <b-card-footer class="text-center">
                        <a href="javascript:void(0);" class="text-link small">查看更多</a>
                    </b-card-footer>
                </b-card>

            </div>
        </div>

        <!-- 第三行 -->
        <div class="row">
            <div class="col-md-8">
                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6" class="with-elements border-0 pr-0 pb-0">
                        <div class="card-header-title">
                            <strong>数据接口调用频率</strong>
                        </div>
                        <div class="card-header-elements ml-auto mr-2">
                            <div class="text-muted small">已购接口
                                <strong>35</strong>个</div>
                            <Button type="info" size="small" shape="circle">
                                <Icon type="briefcase" class="mr-2"></Icon>接口商店</Button>
                        </div>
                    </b-card-header>
                    <div class="pv-5 mt-4 " style="padding:35px">
                        <dashboard2-chart1 class="w-100" :width="650" :height="120" />
                    </div>
                </b-card>

            </div>
            <div class="col-sm-6 col-xl-4">

                <b-card no-body class="mb-4">
                    <b-card-header header-tag="h6" class="with-elements border-0 pr-0 pb-0">
                        <div class="card-header-title">
                            <strong>接口调用情况</strong>
                        </div>
                        <div class="card-header-elements ml-auto mr-2">
                            <Button type="text" size="small" shape="circle" @click="goApiList">
                                <Icon type="android-exit" title="查看更多"></Icon>
                            </Button>
                        </div>
                    </b-card-header>
                    <div class="py-4 px-3">
                        <dashboard4-chart10 :height="120" :width="320" />
                    </div>
                    <div class="row text-center pb-2">
                        <div class="col">
                            <div class="text-muted small">调用总次数</div>
                            <strong class="text-big">402次</strong>
                        </div>
                        <div class="col">
                            <div class="text-muted small">节省总金额</div>
                            <strong class="text-big">￥7,233</strong>
                        </div>
                    </div>
                </b-card>

            </div>

        </div>

    </div>
</template> 

<style scoped>
.bg-img {
    width: 50px;
    height: 50px;

    background-image: url("/static/img/bg/1.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.home-card-content .card-body {
    padding-bottom: 6px;
}

.home-card-footer {
    border-top: 1px solid #181c210f;
    display: flex;
    justify-content: space-between;
}
</style>


<script>
import Vue from "vue";
import VueChartJs from "vue-chartjs";

Vue.component("dashboard2-chart1", {
    extends: VueChartJs.Bar,
    mounted() {
        this.renderChart(
            {
                datasets: [
                    {
                        data: [
                            24,
                            92,
                            77,
                            90,
                            91,
                            78,
                            28,
                            49,
                            23,
                            81,
                            15,
                            97,
                            94,
                            16,
                            99,
                            61,
                            38,
                            34,
                            48,
                            3,
                            5,
                            21,
                            27,
                            4,
                            33,
                            40,
                            46,
                            47,
                            48,
                            18
                        ],
                        borderWidth: 0,
                        backgroundColor: "rgba(87, 181, 255, 1)"
                    }
                ],
                labels: [
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    ""
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    display: false
                },
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard2-chart3", {
    extends: VueChartJs.Doughnut,
    mounted() {
        this.renderChart(
            {
                datasets: [
                    {
                        data: [54, 46],
                        backgroundColor: ["#673AB7", "#f9f9f9"],
                        hoverBackgroundColor: ["#673AB7", "#f9f9f9"],
                        borderWidth: 0
                    }
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                },
                cutoutPercentage: 94,
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard4-chart3", {
    extends: VueChartJs.Doughnut,
    mounted() {
        this.renderChart(
            {
                datasets: [
                    {
                        data: [63, 37],
                        backgroundColor: ["#28c3d7", "rgba(255, 255, 255, .1)"],
                        hoverBackgroundColor: [
                            "#28c3d7",
                            "rgba(255, 255, 255, .1)"
                        ],
                        borderWidth: 0
                    }
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: false
                },
                cutoutPercentage: 94,
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard2-chart2", {
    extends: VueChartJs.Line,
    mounted() {
        this.renderChart(
            {
                datasets: [
                    {
                        data: [
                            24,
                            92,
                            77,
                            90,
                            91,
                            78,
                            28,
                            49,
                            23,
                            81,
                            15,
                            97,
                            94,
                            16,
                            99,
                            61,
                            38,
                            34,
                            48,
                            3,
                            5,
                            21,
                            27,
                            4,
                            33,
                            40,
                            46,
                            47,
                            48,
                            18
                        ],
                        borderWidth: 1,
                        backgroundColor: "rgba(0,0,0,0)",
                        borderColor: "#009688",
                        pointBorderColor: "rgba(0,0,0,0)",
                        pointRadius: 1,
                        lineTension: 0
                    }
                ],
                labels: [
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    ""
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    display: false
                },
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard4-chart8", {
    extends: VueChartJs.Pie,
    mounted() {
        this.renderChart(
            {
                labels: ["Desktops", "Smartphones", "Tablets"],
                datasets: [
                    {
                        data: [1225, 654, 211],
                        backgroundColor: [
                            "rgba(99,125,138,0.5)",
                            "rgba(28,151,244,0.5)",
                            "rgba(2,188,119,0.5)"
                        ],
                        borderColor: ["#647c8a", "#2196f3", "#02bc77"],
                        borderWidth: 1
                    }
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    position: "right",
                    labels: {
                        boxWidth: 12
                    }
                },
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard4-chart9", {
    extends: VueChartJs.Bar,
    mounted() {
        this.renderChart(
            {
                datasets: [
                    {
                        data: [
                            24,
                            92,
                            77,
                            90,
                            91,
                            78,
                            28,
                            49,
                            23,
                            81,
                            15,
                            97,
                            94,
                            16,
                            99,
                            61,
                            38,
                            34,
                            48,
                            3,
                            5,
                            21,
                            27,
                            4,
                            33,
                            40,
                            46,
                            47,
                            48,
                            18
                        ],
                        borderWidth: 0,
                        backgroundColor: "#8897AA"
                    }
                ],
                labels: [
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    ""
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    display: false
                },
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

Vue.component("dashboard4-chart10", {
    extends: VueChartJs.Pie,
    mounted() {
        this.renderChart(
            {
                labels: ["内部调用", "外部调用"],
                datasets: [
                    {
                        data: [1225, 402],
                        backgroundColor: [
                            "rgba(28,151,244,0.5)",
                            "rgba(2,188,119,0.5)"
                        ],
                        borderColor: ["#2196f3", "#02bc77"],
                        borderWidth: 1
                    }
                ]
            },
            {
                scales: {
                    xAxes: [
                        {
                            display: false
                        }
                    ],
                    yAxes: [
                        {
                            display: false
                        }
                    ]
                },
                legend: {
                    position: "right",
                    labels: {
                        boxWidth: 12
                    }
                },
                responsive: false,
                maintainAspectRatio: false
            }
        );
    }
});

export default {
    name: "home",
    metaInfo: {
        title: "Home"
    },
    data: () => ({
        controlNode: "1",
        totalPage: 100,
        html: "",
        loading: false,
        resData: [],
        showIndex: true,
        columns: [
            {
                title: "姓氏",
                key: "first_name"
            },
            {
                title: "名字",
                key: "last_name"
            },
            {
                title: "性别",
                key: "gender"
            },
            {
                title: "所在公司",
                key: "company"
            }
        ],
        data: [
            {
                first_name: "Ethel",
                last_name: "Price",
                gender: "female",
                company: "Johnson, Johnson and Partners, LLC CMP DDC"
            },
            {
                first_name: "Claudine",
                last_name: "Neal",
                gender: "female",
                company: "Sealoud"
            },
            {
                first_name: "Beryl",
                last_name: "Rice",
                gender: "female",
                company: "Velity"
            },
            {
                first_name: "Wilder",
                last_name: "Gonzales",
                gender: "male",
                company: "Geekko"
            },
            {
                first_name: "Georgina",
                last_name: "Schultz",
                gender: "female",
                company: "Suretech"
            },
            {
                first_name: "Carroll",
                last_name: "Buchanan",
                gender: "male",
                company: "Ecosys"
            },
            {
                first_name: "Valarie",
                last_name: "Atkinson",
                gender: "female",
                company: "Hopeli"
            }
        ]
    }),
    created() {
        let vm = this;

        const charts = this.$children.filter(component =>
            /-chart\d+$/.test(component.$options._componentTag)
        );

        const resizeCharts = () =>
            charts.forEach(chart => chart._data._chart.resize());

        // Initial resize
        resizeCharts();

        // For performance reasons resize charts on delayed resize event
        this.layoutHelpers.on("resize.dashboard-2", resizeCharts);
    },
    methods: {
        goApiList(){
            this.$router.push({
                path: '/origin/index'
            });
        }
    },
    beforeDestroy() {
        this.layoutHelpers.off("resize.dashboard-2");
    }
};
</script>
